<!-- 预约挂号页面 -->
<template>
  <div class="yygh-container">
    <!-- 搜索框 -->
    <div class="search-bar">
      <img src="/static/UtilsImage/Search.png" class="search-icon" />
      <input class="search-input" placeholder="请输入医院名称" />
    </div>

    <!-- 医院列表 -->
    <div class="hospital-list">
      <div
        class="hospital-card"
        v-for="(item, idx) in hospitals"
        :key="idx"
        @click="goToXzks(item)"
      >
        <div class="hospital-img"></div>
        <div class="hospital-info">
          <div class="hospital-title">{{ item.title }}</div>
          <div class="hospital-tags">
            <span class="tag">{{ item.grade }}</span>
            <span class="tag tag-type">{{ item.category }}</span>
          </div>
          <div class="hospital-address">
            <img src="/static/MyImage/address.png" class="address-icon" />
            <span>地址:{{ item.address }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部提示 -->
    <div class="no-more">没有更多了</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getYyghDoctorData } from '@/https/HomeHTTP'
import { onShow } from '@dcloudio/uni-app'
import type { YyghDoctorDataItemResult } from '@/types/home'
// 响应式数据
const hospitals = ref<YyghDoctorDataItemResult[]>([])
const getYyghDoctor = async () => {
  const res = await getYyghDoctorData()
  hospitals.value = res.data.result
}
onShow(async () => {
  await getYyghDoctor()
})
// 方法
const goToXzks = (item: YyghDoctorDataItemResult) => {
  uni.navigateTo({
    url: `/pages/component/xzks/xzks?title=${encodeURIComponent(
      item.title,
    )}&grade=${encodeURIComponent(item.grade)}&category=${encodeURIComponent(
      item.category,
    )}&address=${encodeURIComponent(item.address)}&logo=${encodeURIComponent(
      item.logo,
    )}&hid=${encodeURIComponent(item.hid)}`,
  })
}
</script>

<style scoped>
.yygh-container {
  background: #f5f5f5;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding-top: 0 !important;
}
/* 适配H5和小程序原生导航栏下方的默认留白 */
page, body, html {
  background: #f5f5f5 !important;
}
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  margin: 18px 16px 0 16px;
  box-shadow: 0 4px 12px 0 #d2f5d2;
  padding: 0 16px;
  height: 48px;
}
.search-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.search-input {
  border: none;
  outline: none;
  font-size: 16px;
  flex: 1;
  background: transparent;
  color: #888;
}
.hospital-list {
  margin: 18px 0 0 0;
  padding: 0 18px 0 18px;
}
.hospital-card {
  display: flex;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 #e6f7e6;
  margin-bottom: 16px;
  padding: 14px 18px 14px 18px;
  align-items: flex-start;
}
.hospital-img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  margin-right: 16px;
  background: #eaeaea;
  border: 1px solid #e0e0e0;
}
.hospital-info {
  flex: 1;
  min-width: 0;
}
.hospital-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.2;
  text-align: left;
}
.hospital-tags {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.tag {
  display: inline-block;
  background: #3ec99e;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  padding: 2px 14px 2px 14px;
  margin-right: 8px;
  line-height: 1.1;
}
.tag-type {
  background: #e6f7e6;
  color: #3ec99e;
  font-weight: bold;
  border: 1px solid #3ec99e;
}
.hospital-address {
  display: flex;
  align-items: center;
  color: #222;
  font-size: 16px;
  margin-top: 2px;
}
.address-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.no-more {
  text-align: center;
  color: #bbb;
  font-size: 16px;
  margin: 32px 0 0 0;
}
</style>